<script setup lang="ts">
import { onMounted } from "vue";
// import action from "./qiankun/action";
onMounted(() => {
  console.log("root onMounted");
  // action.initActions();
});
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <el-row :gutter="20">
            <el-col :span="16">
              <router-link to="/vue-history">Go to vue</router-link> |
              <router-link to="/vue-his">Go to react</router-link>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
          <div>
            <el-button>Default</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
          </div>
          <div>
            <router-link to="/home">Go to Home</router-link> |
            <router-link to="/about">Go to About</router-link> |
            <router-link to="/resb">Go to Resb</router-link>
          </div>
          <div>
            <router-view> </router-view>
            <div id="frame"></div>
            <div id="frame1"></div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-aside {
  background-color: aquamarine;
}
.el-header {
  background-color: bisque;
}
</style>
